<template>
    <div class="on-sale-good-car">
        <div class="search-content">
            <el-form :model="searchContent" ref="searchFrom" :inline="true">
            	<el-form-item label="ID：" prop="id">
            		<el-input class="search-content-input" v-model="searchContent.id" placeholder="请输入ID"></el-input>
				</el-form-item>
            	<el-form-item label="预约店铺：" prop="store_name">
            		<el-input class="search-content-input" v-model="searchContent.store_name" placeholder="请输入预约店铺"></el-input>
				</el-form-item>
            	<el-form-item label="预约到店时间：" prop="arrive_time">
                	<el-date-picker
                	    v-model="searchContent.arrive_time"
						value-format="yyyy-MM-dd"
                	    type="daterange"
                	    range-separator="至"
                	    start-placeholder="开始日期"
                	    end-placeholder="结束日期">
                	</el-date-picker>
				</el-form-item>
            	<el-form-item label="预约类型：" prop="type">
					<el-select v-model="searchContent.type" placeholder="预约类型">
            		    <el-option
            		        v-for="item in options"
            		        :key="item.value"
            		        :label="item.label"
            		        :value="item.value">
            		    </el-option>
            		</el-select>
				</el-form-item>
            	<el-form-item label="手机号：" prop="mobile">
            		<el-input class="search-content-input" v-model="searchContent.mobile" placeholder="预约客户手机号"></el-input>
				</el-form-item>
            	<el-form-item label="创建日期：" prop="add_time">
                	<el-date-picker
                	    v-model="searchContent.add_time"
						value-format="yyyy-MM-dd"
                	    type="daterange"
                	    range-separator="至"
                	    start-placeholder="开始日期"
                	    end-placeholder="结束日期">
                	</el-date-picker>
				</el-form-item>
            	<el-form-item label="预约来源：" prop="originate" v-if="!externalData">
					<el-select v-model="searchContent.originate" placeholder="预约来源">
            		    <el-option
            		        v-for="item in originateOptions"
            		        :key="item.value"
            		        :label="item.label"
            		        :value="item.value">
            		    </el-option>
            		</el-select>
				</el-form-item>
            	<el-form-item label="预约状态：" prop="reservation_status">
					<el-select v-model="searchContent.reservation_status" placeholder="预约状态">
            		    <el-option
            		        v-for="item in statusOptions"
            		        :key="item.value"
            		        :label="item.label"
            		        :value="item.value">
            		    </el-option>
            		</el-select>
				</el-form-item>
            	<el-form-item label="主动预约：" prop="is_initiative">
					<el-select v-model="searchContent.is_initiative" placeholder="主动预约">
            		    <el-option
            		        v-for="item in activeOptions"
            		        :key="item.value"
            		        :label="item.label"
            		        :value="item.value">
            		    </el-option>
            		</el-select>
				</el-form-item>
            	<el-form-item label="是否有效：" prop="is_enable">
					<el-select v-model="searchContent.is_enable" placeholder="预约是否有效">
            		    <el-option
            		        v-for="item in enableOptions"
            		        :key="item.value"
            		        :label="item.label"
            		        :value="item.value">
            		    </el-option>
            		</el-select>	
				</el-form-item>	
            	<el-form-item label="所属集团：" prop="first_depart_id">
            	    <el-select 
            	        v-model="searchContent.first_depart_id" 
            	        placeholder="请选择集团">
            	        <el-option
            	            v-for="item in groupList"
            	            :key="item.value"
            	            :label="item.label"
            	            :value="item.value">
            	        </el-option>
            	    </el-select>
            	</el-form-item>
            	<el-form-item>
            		<el-button type="primary" @click="search">搜索</el-button>
            		<el-button type="primary" @click="resetSearchData">重置</el-button>
            	</el-form-item>
			</el-form>
        </div>
        <div class="search-list">
            <el-table :data="goodsList" border :height="oHeight" header-cell-class-name="hdCellStyle">
				<el-table-column
					align="center"
					type="selection"
					width="55">
				</el-table-column>
                <el-table-column
                    align="center"
                    prop="id"
                    label="ID"
                    min-width="100">
				</el-table-column>
                <el-table-column
                    align="center"
                    prop="storeName"
                    label="预约店铺"
                    min-width="160">
				</el-table-column>
                <el-table-column
                    align="center"
                    prop="depart_name"
					:formatter="handleFormatter"
                    label="所属集团"
                    min-width="110">
				</el-table-column>
                <el-table-column
                    align="center"
                    prop="store_id"
                    label="店铺ID"
                    min-width="80">
				</el-table-column>					
                <el-table-column
                    align="center"
                    prop="arriveDate"
                    label="预约到店日期"
                    min-width="130">
				</el-table-column>
				<el-table-column
                    align="center"
                    prop="addTime"
                    label="创建时间"
                    min-width="150">
				</el-table-column>
				<el-table-column
                    align="center"
                    prop="handle_time"
                    label="受理时间"
                    min-width="150">
				</el-table-column>				
				<el-table-column
                    align="center"
                    prop="typeName"
                    label="预约类型"
                    min-width="100">
				</el-table-column>
				<el-table-column
                    align="center"
                    prop="staff_name"
                    label="顾问名称"
                    min-width="120">
				</el-table-column>				
				<el-table-column
                    align="center"
                    prop="originateName"
                    label="预约来源"
					v-if="!externalData"
                    min-width="100">
				</el-table-column>
				<el-table-column
                    align="center"
                    prop="reservationStatusName"
                    label="预约状态"
                    min-width="100">
				</el-table-column>
				<el-table-column
                    align="center"
                    prop="isInitiative"
                    label="主动预约"
                    min-width="80">
				</el-table-column>	
				<el-table-column
                    align="center"
                    prop="isenable"
                    label="预约是否有效"
                    min-width="110">
				</el-table-column>							
                <el-table-column
                    align="center"
                    label="操作"
                    min-width="140"
					v-if="!externalData"
					>
                    <template slot-scope="scope">
                        <el-button @click="lookOverGoodsDetail(scope.row.id)" type="primary">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="btn-group">
                    <el-button size="mini" type="primary" class="btn-bottom" @click="expertData">导出</el-button>
                    <!-- <button type="button" class="btn-bottom" @click="showDeleteDialog">删除</button> -->
                </div>
                <!--分页部分-->
                <div class="paginationOne">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="searchContent.currentPage"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="searchContent.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog
                :before-close="handleClose"
                title="提示"
                :visible="dialogVisible"
                width="30%">
            <span>{{dialogMsg}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelUnshelve">取 消</el-button>
                <el-button type="primary" @click="confirmUnshelve">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
	import { resize } from "@/common/js/height.js";
	import { objScreen } from "@/common/js/util";
    import {dateFormatter} from "@/common/js/util"
	export default {
		props: {
            externalData: { // 注意此属性不要删除，当此组件被单独引入第三方组件时候的父组件传值属性
				type: Object,
				default: null
			} 
		},
		data() {
			return {
				options: [
                    {label: '维修', value: 1},
					{label: '保养', value: 2},
					{label: '试驾', value: 3},
					{label: '上门保养', value: 4},
					{label: '保养套餐', value: 5}
				],
				originateOptions:[
					{label: 'APP', value: 1},
					{label: '微信(单点)', value: 2},
					{label: '网站', value: 3},
					{label: '微信(官微)', value: 4},
					{label: '后台录入', value: 5},
					{label: 'H5', value: 6},
					{label: '线下', value: 7},
					{label: '小程序', value: 8}
				],
				statusOptions:[
					{label: '未受理', value: 0},
					{label: '已受理', value: 1},
					{label: '待评价', value: 2},
					{label: '已完成', value: 3}
				],
				activeOptions:[
					{label: '否', value: 0},
					{label: '是', value: 1}
				],
				enableOptions:[
					{label: '是', value: 1}	,	
					{label: '否', value: 0}			
				],
				oHeight: 800,
                searchContent: {
					currentPage:1,
					pageSize:localStorage.getItem('pageSize')*1||10,
                	id: '',
	                store_name: '',
	                arrive_time: '',
	                type: '',
	                mobile: '',
	                arrive_time: '',
					originate: '',
					reservation_status:'',
					is_initiative:'',
					first_depart_id: '',
					is_enable:'',
                    filter_not_yt: null
				},
				searchObj:{},
                goodsList: [],
                groupList: [],
				total: 0,
				needUnshelveGoods: null,
				dialogVisible: false,
				dialogMsg: ''
            }
        },
        methods: {
			handleFormatter(row, column, cellValue) {
				if (cellValue != 0) return cellValue
			},
        	handleGroup() {
        	    this.$http.post('/crm/coupons/index.php?act=statistics&op=getCouponDepart')
        	    .then(res => {
        	        if (res.data) {
        	            this.groupList = [
        	                { label: '全部', value: 0 },
        	                ...res.data.map(item => ({ 
        	                    label: item.depart_name, 
        	                    value: parseInt(item.depart_id) 
        	                }))
        	            ]
        	        }
        	    }).catch(error => {
        	        error && this.$message.error(`${error}`)
        	    })
        	},
			getOptions(){
				//获取来源originateOptions
				this.$http.post('/admin/appointment/index.php?act=appoint&op=getOriginates').then((res)=>{
					if(res.code===1){
						this.originateOptions = res.data||[];
					}
				})
				//获取预约状态statusOptions
				this.$http.post('/admin/appointment/index.php?act=appoint&op=getReservationStatus').then((res)=>{
					if(res.code===1){
						this.statusOptions = res.data||[];
					}
				})
				//获取预约类型activeOptions
				this.$http.post('/admin/appointment/index.php?act=appoint&op=getTypes').then((res)=>{
					if(res.code===1){
						this.options = res.data||[];
					}
				})
			},
			expertData(){
				if(this.$store.state.isServer){
					var host = location.host.replace('admin','api');
				}else{
					var host = location.host + '/api'
				}
				var url = location.protocol+"//"+host+'/admin/appointment/index.php?act=appoint&op=appointList&is_export=1';
				var searchData = this.searchObj;
				for(var key in searchData){
                    if(!(searchData[key]===null||searchData[key]===''||searchData[key]===undefined||key==='page'||key==='pageSize'||key==='currentPage')){
						url+='&'+key+'='+searchData[key]
                    }
				}
				window.location.href = url;
			},
	        resetSearchData() {
		        this.searchContent = {
					currentPage:1,
					pageSize:localStorage.getItem('pageSize')*1||10
				}
				if (this.externalData && this.externalData.filter_not_yt) {
					this.searchContent.originate = this.searchContent.originate
				}
				this.getListData();
	        },
	        search() {
				this.searchContent.currentPage = 1;
				let arrive_time = this.searchContent.arrive_time;
				let add_time = this.searchContent.add_time;
				this.searchObj = objScreen({
					id: this.searchContent.id,
	                store_name: this.searchContent.store_name,
					arrive_date_start:arrive_time&&dateFormatter('YYYY-MM-DD 00:00:00', arrive_time[0]),
					arrive_date_end:arrive_time&&dateFormatter('YYYY-MM-DD 23:59:59', arrive_time[1]),
	                type: this.searchContent.type,
	                mobile: this.searchContent.mobile,
					add_time_start: add_time&&dateFormatter('YYYY-MM-DD 00:00:00', add_time[0]),
					add_time_end:add_time&&dateFormatter('YYYY-MM-DD 23:59:59', add_time[1]),
					originate: this.searchContent.originate,
					reservation_status:this.searchContent.reservation_status,
					is_initiative:this.searchContent.is_initiative,
					is_enable:this.searchContent.is_enable,
					first_depart_id: this.searchContent.first_depart_id
				})
               if(this.searchContent.filter_not_yt) this.searchObj.filter_not_yt = this.searchContent.filter_not_yt;
		        this.getListData();
	        },
	        handleSizeChange(pageSize) {
				localStorage.setItem('pageSize',pageSize);
		        this.searchContent.pageSize = pageSize;
		        this.searchContent.currentPage = 1;
		        this.getListData();
            },
	        handleCurrentChange(page) {
		        this.searchContent.currentPage = page;
		        this.getListData();
            },
	        getListData() {
		        var data = this.searchObj;
				data.page = this.searchContent.currentPage;
				data.pageSize = this.searchContent.pageSize;
		        this.$http.post('/admin/appointment/index.php?act=appoint&op=appointList',data).then((res)=> {
			        if (res.code == 1) {
				        if (res.data && res.data.list.length) {
					        this.goodsList = res.data.list.map(function(item) {
						        return {
							        id: item.id,
							        storeName: item.store_name,
							        arriveDate: item.arrive_date,
                                    typeName: item.type_name,
                                    addTime: item.add_time,
							        originateName: item.originate_name,
							        reservationStatusName: item.reservation_status_name,
									isInitiative: item.is_initiative,
									isenable:item.enable==1?'是':'否',
									store_id:item.store_id,
									staff_name:item.staff_name,
									handle_time:item.handle_time,
									depart_name: item.depart_name
						        }
							});
					        this.total = parseInt(res.data.totalCount);
				        } else {
					        this.goodsList = [];
					        this.total = 0;
				        }
			        }
			        else if (res.code == 2001) {
				        this.goodsList = [];
				        this.total = 0;
			        }
			        else {
				        alert(res.msg);
			        }
		        })
	        },
	        unshelveGoods(goodsItem) {
		        this.$http.post('/admin/preferential_car/index.php?act=preferentialCar&op=pullOffShelves', {
			        id: goodsItem.id
		        }).then(res => {
			        if (res.code == 1) {
				        goodsItem.status = 2
			        } else {
				        alert(res.msg)
			        }
		        })
            },
	        handleClose() {
		        this.cancelUnshelve();
	        },
	        cancelUnshelve() {
		        this.dialogVisible = false;
		        this.dialogMsg = '';
		        this.needUnshelveGoods = null;
	        },
	        confirmUnshelve() {
		        this.unshelveGoods(this.needUnshelveGoods);
		        this.cancelUnshelve();
	        },
	        lookOverGoodsDetail(id) {
	        	this.$router.push(`/home/operate-panel/booking-management/booking-detail?id=${id}`)
            }
        },
        mounted() {
	        resize(this)
        },
		created() {
			if(this.externalData && this.externalData.filter_not_yt) {
				this.searchContent.originate = this.externalData.originate;
				this.searchObj.originate = this.externalData.originate;
                this.searchContent.filter_not_yt = this.externalData.filter_not_yt
				this.searchObj.filter_not_yt = this.externalData.filter_not_yt;
			}
			this.$parent.tabLists = [
				{"label": "预约管理", "name": 'booking-index'}
			]
			this.getOptions();
			this.getListData();
			this.handleGroup();
			
		},
		name: "on-sale-good-car"
	}
</script>

<style lang="scss" scoped>
    .on-sale-good-car {
        .search-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            &-input {
                width: 200px;
            }
            .putaway-time-wrapper {
                .putaway-time-label {
                    font-size: 14px;
                }
                display: flex;
                align-items: center;
                /deep/.el-range-separator {
                    box-sizing: content-box;
                }
            }
        }
    }
	.bottom{
		display: flex;
		justify-content:space-between;
		align-items: center;
	}
</style>